<template>
  <div style="color: #000">
    <div style="font-weight: bold; font-size: 16px">系统时间同步</div>
    <div style="width: 558px; padding-left: 40px">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        labelAlign="left"
        layout="horizontal"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
        style="margin-top: 30px"
      >
        <a-form-model-item label="当前系统时间:" style="width: 100%">
          <div class="time-warp">
            <div>(UTC +8:00)北京 {{ time }}</div>
            <div>{{ date }}，{{ week }}</div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="时间同步:" prop="checked" style="width: 100%">
          <a-checkbox :checked="checked" @change="onChange"> 开启 </a-checkbox>
        </a-form-model-item>
        <a-form-model-item
          label="时间服务IP:"
          prop="serviceIp"
          style="width: 100%"
        >
          <IpAddressVue
            style="width: 100%"
            placeholder=""
            v-model="form.serviceIp"
          />
          <!-- <a-input v-model="form.serviceIp" placeholder="-" /> -->
        </a-form-model-item>
        <a-form-model-item
          label="时间服务端口:"
          prop="servicePort"
          style="width: 100%"
        >
          <a-input v-model="form.servicePort" placeholder="-" />
        </a-form-model-item>
        <a-form-model-item
          label="自动同步周期:"
          prop="syncTimeInterval"
          style="width: 100%"
        >
          <a-input v-model="form.syncTimeInterval" placeholder="-" /><span
            style="position: absolute; right: -20px; top: -12px"
            >秒</span
          >
        </a-form-model-item>
        <div class="flex mt-10">
          <u-button class="btn-default btn-confirm" @click="confirm">
            确定
          </u-button>
        </div>
      </a-form-model>
    </div>
  </div>
</template>
<script>
import { getSecDeviceList, updateSystemTimeSync } from "@/api/time-lock";
import IpAddressVue from "@/components/IpAddress.vue";
export default {
  components: {
    IpAddressVue,
  },
  data() {
    return {
      checked: false,
      form: {
        openTimeSync: "",
        serviceIp: "",
        servicePort: "",
        syncTimeInterval: 30000,
      },
      date: null,
      time: null,
      week: null,
      rules: {
        serviceIp: [
          { required: true, message: "时间服务IP不能为空", trigger: "change" },
        ],
        servicePort: [
          {
            required: true,
            message: "时间服务端口不能为空",
            trigger: "change",
          },
        ],
        syncTimeInterval: [
          {
            required: true,
            message: "自动同步周期不能为空",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      getSecDeviceList().then((res) => {
        // console.log(res);
        this.form = res.data;
        this.checked = res.data.openTimeSync == 1 ? true : false;
        // 时间戳
        let timestamp = res.data.systemTime;
        // 此处时间戳以毫秒为单位
        let date = new Date(parseInt(timestamp));
        let Year = date.getFullYear();
        let Moth =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1;
        let Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        let Hour =
          date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        let Minute =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        let Sechond =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        this.date = Year + "年" + Moth + "月" + Day + "  日";
        this.time = Hour + ":" + Minute + ":" + Sechond;
        this.week = this.getWeek(date.getDay());
      });
    },
    getWeek(timedat) {
      //timedat参数格式：   getWeek（new Date("2017-10-27" )）

      var week;

      if (timedat == 0) week = "星期日";

      if (timedat == 1) week = "星期一";

      if (timedat == 2) week = "星期二";

      if (timedat == 3) week = "星期三";

      if (timedat == 4) week = "星期四";

      if (timedat == 5) week = "星期五";

      if (timedat == 6) week = "星期六";

      return week;
    },
    onChange(e) {
      this.checked = e.target.checked;
      this.form.openTimeSync = e.target.checked ? 1 : 2;
    },
    confirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          updateSystemTimeSync(this.form).then((res) => {
            if (res.code === 200) {
              this.$message.success("更新配置成功");
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.time-warp {
  background-color: #f2f2f2;
  padding-left: 15px;
  border-radius: 5px;
}
</style>
